import React  from 'react';
import { Input, Icon, Button,Tooltip,Breadcrumb,DatePicker,Table, Divider, Tag } from 'antd';
import './report-question.scss'
// 事件组件引用
import moment from 'moment';
import locale from 'antd/lib/date-picker/locale/zh_CN';




class  ReportQuestionComponent extends React.Component{
     constructor(props) {
         super(props);
         this.state = {
            q_title: '',
         };
       }

      // 问题标题
      onChange_q_title = (e) => {
        this.setState({ q_title: e.target.value });
      }

      // 清空标题输入框
      emitEmpty = (e) => {
           this.q_titleInput.focus();
           this.setState({q_title:''});
      }

      // 時間選擇
      range(start, end) {
        const result = [];
        for (let i = start; i < end; i++) {
          result.push(i);
        }
        return result;
      }

      disabledDate(current) {
        // Can not select days before today and today
        return current && current < moment().endOf('day');
      }

      disabledDateTime() {
        return {
          disabledHours: () => this.range(0, 24).splice(4, 20),
          disabledMinutes: () => this.range(30, 60),
          disabledSeconds: () => [55, 56],
        };
      }

      disabledRangeTime(_, type) {
        if (type === 'start') {
          return {
            disabledHours: () => this.range(0, 60).splice(4, 20),
            disabledMinutes: () => this.range(30, 60),
            disabledSeconds: () => [55, 56],
          };
        }
        return {
          disabledHours: () => this.range(0, 60).splice(20, 4),
          disabledMinutes: () => this.range(0, 31),
          disabledSeconds: () => [55, 56],
        };
      }
     render(){

      const data = [{
        key: '1',
        firstName: 'John',
        lastName: 'Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
        tags: ['nice', 'developer'],
      }, {
        key: '2',
        firstName: 'Jim',
        lastName: 'Green',
        age: 42,
        address: 'London No. 1 Lake Park',
        tags: ['loser'],
      }, {
        key: '3',
        firstName: 'Joe',
        lastName: 'Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
        tags: ['cool', 'teacher'],
      },{
        key: '4',
        firstName: 'Joe',
        lastName: 'Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
        tags: ['cool', 'teacher'],
      },{
        key: '5',
        firstName: 'John',
        lastName: 'Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
        tags: ['nice', 'developer'],
      }, {
        key: '6',
        firstName: 'Jim',
        lastName: 'Green',
        age: 42,
        address: 'London No. 1 Lake Park',
        tags: ['loser'],
      }, {
        key: '7',
        firstName: 'Joe',
        lastName: 'Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
        tags: ['cool', 'teacher'],
      },{
        key: '8',
        firstName: 'Joe',
        lastName: 'Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
        tags: ['cool', 'teacher'],
      },{
        key: '9',
        firstName: 'John',
        lastName: 'Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
        tags: ['nice', 'developer'],
      }, {
        key: '10',
        firstName: 'Jim',
        lastName: 'Green',
        age: 42,
        address: 'London No. 1 Lake Park',
        tags: ['loser'],
      }, {
        key: '11',
        firstName: 'Joe',
        lastName: 'Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
        tags: ['cool', 'teacher'],
      },{
        key: '12',
        firstName: 'Joe',
        lastName: 'Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
        tags: ['cool', 'teacher'],
      },{
        key: '13',
        firstName: 'John',
        lastName: 'Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
        tags: ['nice', 'developer'],
      }, {
        key: '14',
        firstName: 'Jim',
        lastName: 'Green',
        age: 42,
        address: 'London No. 1 Lake Park',
        tags: ['loser'],
      }, {
        key: '15',
        firstName: 'Joe',
        lastName: 'Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
        tags: ['cool', 'teacher'],
      },{
        key: '16',
        firstName: 'Joe',
        lastName: 'Black',
        age: 300,
        address: 'Sidney No. 1 Lake Park',
        tags: ['cool', 'teacher'],
      }];



          // 表格
          const { Column, ColumnGroup } = Table;
          // 日期
          const { MonthPicker, RangePicker } = DatePicker;

          // 标题
          const  suffix_q_title =  this.state.q_title ? <Icon type="close-circle" onClick={this.emitEmpty} /> : null;

          return(
            <div  id="report-question">
               <Breadcrumb separator=">">
                 <Breadcrumb.Item>首页</Breadcrumb.Item>
                 <Breadcrumb.Item>被举报问题</Breadcrumb.Item>
               </Breadcrumb>
               <div  className="user-action">
                   <div  className="q-title">
                     <span>问题标题：</span>
                     <Input placeholder="请输入问题标题"
                      value={this.state.q_title}
                      suffix={suffix_q_title}
                      onChange={this.onChange_q_title}
                      ref={node => this.q_titleInput = node}
                      />
                   </div>
                   <div className="date">
                      <span>举报时间：</span>
                      <RangePicker
                           disabledDate={this.disabledDate.bind(this)}
                           disabledTime={this.disabledRangeTime.bind(this)}
                           showTime={{
                             hideDisabledOptions: true,
                             defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
                           }}
                           format="YYYY-MM-DD HH:mm:ss"
                           locale={locale}
                         />
                   </div>
                   <Button icon="search">查询</Button>
               </div>
                <h6 className="p-bg"></h6>
                <div className="table_data">
                     <Table dataSource={data}>
                         <ColumnGroup title="Name">
                           <Column
                             title="First Name"
                             dataIndex="firstName"
                             key="firstName"
                           />
                           <Column
                             title="Last Name"
                             dataIndex="lastName"
                             key="lastName"
                           />
                         </ColumnGroup>
                         <Column
                           title="Age"
                           dataIndex="age"
                           key="age"
                         />
                         <Column
                           title="Address"
                           dataIndex="address"
                           key="address"
                         />
                         <Column
                           title="Tags"
                           dataIndex="tags"
                           key="tags"
                           render={tags => (
                             <span>
                               {tags.map(tag => <Tag color="blue" key={tag}>{tag}</Tag>)}
                             </span>
                           )}
                         />
                         <Column
                           title="Action"
                           key="action"
                           render={(text, record) => (
                             <span>
                               <a href="javascript:;">Invite {record.lastName}</a>
                               <Divider type="vertical" />
                               <a href="javascript:;">Delete</a>
                             </span>
                           )}
                         />
                       </Table>


                </div>
            </div>
         )
     }
}


export  default   ReportQuestionComponent
